<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="ISUX">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="stylesheet" type="text/css" href="../frozen/css/frozen.css">
    <link rel="stylesheet" type="text/css" href="../css/default.css">
    <title>火堆</title>
    <link rel="stylesheet" type="text/css" href="../css/donate.css">
</head>

<body>
    <div class="top-banner">
        <img class="success" src="../images/ic_success.png" alt="">一起捐发起成功！
    </div>
    <div class="top-banner">
        点击右上角，发送给朋友创建一起捐！<img class="share" src="../images/ic-share.png" alt="">
    </div>
    <div class="backdrop active"></div>
    <footer class="ui-footer ui-footer-stable ui-border-t">
        <div class="ui-footer-btns">
            <button class="btn-footer btn-red">立即捐款</button>
        </div>
    </footer>
    <section class="ui-container">
        <div class="top-info">
            <div class="top">
                <img class="img-top" src="../images/img-yqj-top-bg.png" alt="">
                <div class="wrap">
                    <a href="#" class="ui-avatar ui-avatar-spring">
                        <span style="background-image:url(../images/demo/demo-avatar-1.jpg)"></span>
                    </a>
                    <h4>张三 邀你一起捐</h4>
                </div>
            </div>
            <p>“ 我为这个公益项目发起筹款，相信世界的改变不因少数人的很大努力，而因大多数人的一点点。”</p>
        </div>
        <div class="banner-wrap style1">
            <img src="../images/img-invite.png" alt="">
            <div class="banner">
                <div class="ui-flex">
                    <div class="left">
                        <div><em>999.9</em>元</div>
                        <div>目标</div>
                    </div>
                    <div class="right">
                        <div><em>999.9</em>元</div>
                        <div>捐款金额</div>
                    </div>
                </div>
                <div class="ui-progress-box">
                    <div class="ui-progress">
                        <span style="width:50%"></span>
                    </div>
                    <div class="ui-progress-val">20%</div>
                </div>
                <div class="avatar-list-wrap">
                    <div class="ui-justify avatar-list">
                        <a href="##">
                            <ul class="ui-arrowlink">
                                <li>
                                    <div class="ui-avatar-tiled"><span style="background-image:url(../images/demo/demo-avatar-1.jpg)"></span></div>
                                </li>
                                <li>
                                    <div class="ui-avatar-tiled"><span style="background-image:url(../images/demo/demo-avatar-1.jpg)"></span></div>
                                </li>
                                <li>
                                    <div class="ui-avatar-tiled"><span style="background-image:url(../images/demo/demo-avatar-1.jpg)"></span></div>
                                </li>
                                <li>
                                    <div class="ui-avatar-tiled"><span style="background-image:url(../images/demo/demo-avatar-1.jpg)"></span></div>
                                </li>
                                <li>
                                    <div class="ui-avatar-tiled"><span style="background-image:url(../images/demo/demo-avatar-1.jpg)"></span></div>
                                </li>
                                <li>
                                    <div class="ui-avatar-tiled"><span style="background-image:url(../images/demo/demo-avatar-1.jpg)"></span></div>
                                </li>
                            </ul>
                        </a>
                    </div>
                </div>
                <p class="gray">共有<em>2178</em>位小伙伴一起参与
                </p>
            </div>
        </div>
        <div class="banner-wrap style2">
            <div class="ui-cell left title">
                <h4>捐助的项目</h4>
                <div class="info">还需<span>345632</span>元</div>
            </div>
            <div class=" project">
                <div class="ui-box">
                    <div class="ui-list-thumb">
                        <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                    </div>
                    <div class="ui-list-info">
                        <h4 class="ui-nowrap">3万留守儿童的渴望</h4>
                        <p>和“真爱公益”一起为74所学校共29877名留守儿童筹集善款作</p>
                    </div>
                </div>
                <p class="msg">善款接收：上海市真爱梦想公益基金会</p>
                <div class="detail">
                    <div class="title">
                        项目详情</div>
                    <p>和“真爱公益”一起，为74所学校共29877名留守儿童筹集善款制作故事盒子。通过捐助“故事盒子”的方式让好故事和好音乐在路上陪伴留守的孩子们，这些名为“故事盒子”的电子装置中记录了由一些著名主持人、演员、媒体人等录制的音频。</p>
                    <img src="../images/demo/.png" alt="">
                    <h5>如何使用善款</h5>
                    <p>我们正在为74所学校同时筹集制作故事盒子的善款，由于学校数量较多，如没有完成筹款标的，我们善款的使用规则为：根据学校的留守儿童比例高低和学校基础设施的好坏依次拨款、制作、发放故事盒子。</p>
                    <h5>我们是谁</h5>
                    <p>为了回报社会，为了传递爱心，上海真爱梦想公益基金会成员发起“火堆”公益活动，这是一个Web，这是一个App，这是一份对教育公益事业的热情与执着。上海真爱梦想公益基金会（具有国家民政部门许可的公开募款资质）</p>
                </div>
                <div class="btn-container">
                    <div class="btn btn-detail">项目详情<i class="icon-down"></i></div>
                </div>
            </div>
        </div>
        <div class="banner-wrap">
            <div class="txt-bottom"><a>了解火堆</a><a href>关注火堆</a><img src="../images/ic-qrcode.png" alt=""></div>
            <img class="img-bottom" src="../images/logo_and_txt.png" alt="" class="ui-introduction">
        </div>
    </section>
    <script src="../frozen/lib/zeptojs/zepto.min.js"></script>
    <script src="../frozen/js/frozen.js"></script>
    <script>
    $('.btn-detail').on('click', function() {
        if ($(this).hasClass('active')) {
            $(this).removeClass('active').parent('.btn-container').siblings('.detail').removeClass('active');
        } else {
            $(this).addClass('active').parent('.btn-container').siblings('.detail').addClass('active');

        }

    })
    </script>
</body>

</html>
